<template>
    <div>
        <!-- 头部导航 -->
        <van-nav-bar title="个人信息编辑" left-arrow>
            <template #right>
                <!-- <van-icon name="search" size="18" /> -->
                <van-icon color="#000" name="wap-home-o" size="20" />
            </template>
        </van-nav-bar>
        <!-- 用户头像 -->
        <div class="head_img">
            <!-- <img src="http://img1.imgtn.bdimg.com/it/u=3757784226,1202878475&fm=26&gp=0.jpg" alt=""> -->
            <img :src="user.head_img|joinPath" alt="">
            <van-uploader :after-read="afterRead" />
        </div>
        <!-- 昵称 -->
        <van-cell @click="changeNickname" title="昵称" is-link :value="user.nickname" />
        <van-dialog v-model="showNickname" title="标题" show-cancel-button 
        @confirm="nickNameConfirm"
        :before-close="nickNameBeforeColse">
              <van-field
                ref="nickname"
                    v-model.trim="nickname"
                    required
                    label="用户名"
                    placeholder="请输入用户名"
                />
        </van-dialog>
        <!-- 密码 -->
        <van-cell @click="changePw" title="密码" is-link value="*******" />
        <van-dialog v-model="showPw" title="编辑密码" show-cancel-button 
        :before-close="pwBeforeClose"
        @confirm="pwConfirm" >
              <van-field
                v-model="oldPw"
                  type="password"
                    required
                    label="原密码"
                    placeholder="请输入原密码"
                />
                <van-field
                v-model="newPw"
                  type="password"
                    required
                    label="新密码"
                    placeholder="请输入新密码"
                />
        </van-dialog>
        <!-- 性别 -->
        <van-cell title="性别" is-link 
        :value="user.gender==1?'男':'女'" />
    </div>
</template>
<script>
import { userInfo, upload, user_update } from "../api/user.js"
export default {
    data(){
        return {
            user: {},
            id: null,
            showNickname: false, // 控制昵称弹窗的显示隐藏 false表示隐藏
            nickname: "",
            showPw: false, // 控制密码弹窗的显示隐藏，false表示隐藏弹窗
            oldPw: "", // 原密码
            newPw: ""  // 新密码
        }
    },
    created(){
        this.id = localStorage.getItem("74-userId")
        userInfo(this.id).then(res=>{
            // console.log(28,res);
            this.user = res.data.data;
        })
    },
    methods: {
        // 修改密码 --控制修改密码弹窗的显示
        changePw(){
            this.showPw = true
        },
        // 控制 修改昵称弹窗的显示
        changeNickname(){
            this.showNickname = true
            this.nickname = this.user.nickname
            this.$nextTick(()=>{
                // console.log(85); 
                setTimeout(() => {
                    this.$refs.nickname.focus()
                }, 1000);
            })
        },
        // 密码确定修改
        pwConfirm(){
            // 判断原密码是否正确
            if(this.oldPw !== this.user.password){
                return this.$toast.fail("原密码输入错误！")
            }
            // 判断原密码和新密码是否相同
            if(this.oldPw === this.newPw){
                return this.$toast.fail("新密码不能和原密码相同！")
            }
            // 判断新密码不能为空
            if(this.newPw == ""){
                return this.$toast.fail("新密码不能为空！")
            }
            // 调用接口 实现修改密码功能
            user_update(this.id, {
                password: this.newPw
            }).then(res=>{
                if(res.data.message == "修改成功"){
                    this.$toast.success(res.data.message)
                    // 更新原密码
                    this.user.password = this.newPw
                    this.oldPw = ""
                    this.newPw = ""
                }else{
                    this.$toast.fail(res.data.message)
                }
            })
        },
        // 优化：点击确认按钮，判断到输入内容不符合条件，则阻止弹窗关闭，否则可以关闭。
        pwBeforeClose(action, done){
            // 判断是否为确认按钮
            if(action === "confirm"){
                // 判断原密码是否正确 或者新旧密码是否相同
                if(this.oldPw !== this.user.password || this.oldPw === this.newPw || this.newPw == ""){
                    done(false)
                }else{
                    done()
                }
            }else{
                // 点击取消按钮，清空新旧密码
                this.oldPw = ""
                this.newPw = ""
                done()
            }
        },
        // 昵称确认修改 触发的函数
        nickNameConfirm(){
            // console.log(60)
            //判断一定要在调用接口之前写
            if(this.nickname === ""){
                return this.$toast.fail("昵称不能为空！")
            }
            
            user_update(this.id, {
                nickname: this.nickname
            } ).then(res=>{
                // console.log(64,res)
                if(res.data.message === "修改成功"){
                    // 更新浏览器中显示的昵称
                    this.user.nickname = res.data.data.nickname
                }else{
                    this.$toast.fail(res.data.message)
                }
            })
        },
        // 昵称弹窗关闭前触发的函数
        nickNameBeforeColse(action,done){
            // console.log(81,action);
            // done是一个函数，直接调用 关闭弹窗，调用且传入false表示阻止弹窗关闭
            // 当用户输入的昵称为空，且点击的按钮为确认按钮的时候，阻止弹窗关闭
            // 注意：只要我们给dialog组件绑定了before-close属性，那么就会阻止弹窗关闭，此刻必须调用了done函数才会关闭弹窗
            if(this.nickname === "" && action === "confirm"){
                done(false)
            }else{
                done()
            }
        },
        // 修改头像
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file);
            // 注意：上传文件需要用到formData格式
            let formData = new FormData()
            formData.append("file",file.file)
            upload(formData).then(res=>{
                // console.log(48,res)
                // 调用编辑用户信息接口，实现头像的修改
                user_update(this.id, {
                    head_img: res.data.data.url
                }).then(result=>{
                    // console.log(54,res);
                    // 更新浏览器上渲染的头像
                    if(result.data.message === "修改成功"){
                        this.user.head_img = result.data.head_img
                    }else{
                        this.$toast.fail(res.data.message)
                    }
                })
            })
        },
    }
}
</script>
<style lang="less" scoped>
//  /deep/ 表示样式穿透是less的语法，专门用于设置组件内部标签的样式 
/deep/ .van-nav-bar{
    border-bottom: 1px solid #ddd;
    .van-icon-arrow-left{
        color: #000;
    }
}
// 设置组件跟标签的样式的时候，不需要添加样式穿透
.van-cell{
    border-bottom: 1px solid #ddd;
}
.head_img{
    width: 80px;
    height: 80px;
    margin: 20px auto;
    position: relative;
    img{
        width: 100%;
    }
    .van-uploader{
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }
}

</style>